import React, { useEffect } from 'react';
import { Modal, Input, Form, Button, message } from 'antd';
import styles from './index.module.scss';
// import { editPassword } from '@/service'


export default (props) => {
  const { visible, onClose, emailNow } = props;
  const [form] = Form.useForm(); // 创建表单实例
  const onSubmit = async () => {
    try {
      await form.validateFields().then(async (values) => {
        const { emailNow, emailNew } = values;
        // console.log('33',emailNow, emailNew)
        // let params = {
        //   password
        // }
        // editPassword(params).then(response => {
        //   if (response.code === 1) {
        //     message.success('密码修改成功');
        //     handleSubmit();
        //   } else {
        //     message.error('密码修改失败');
        //   }
        // }).catch(e => {
        //     message.error(e?.message);
        // });
      })

    } catch (error) {
      // message.error('Something went wrong!');
    }
  };
  const validateEmail = (rule, value) => {
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
    if (!value) {
      return Promise.reject(new Error('Please enter new email'));
    } else if(!emailRegex.test(value)) {
      return Promise.reject(new Error('Please enter correct email'));
    }
    return Promise.resolve();
  };
  const handleClose = () => {
    onClose();
    form.resetFields();
  }
  return (
    <Modal
      title="Change email"
      open={visible}
      className='custom-notitle-modal'
      width={550}
      onCancel={handleClose}
      footer={null}
      destroyOnClose
      maskClosable={false}
    >
      <Form
        form={form}
        name="email_form"
        className={`custom-form-primary ${styles.psdform}`}
        labelCol={{ span: 7 }}
        wrapperCol={{ span: 12 }}
      >
        <Form.Item
          name="emailNow"
          label='Current email'
          initialValue={emailNow}
        >
          <div className={styles.emailText}>{emailNow}</div>
        </Form.Item>
        <Form.Item
          label='new email'
          name="emailNew"
          rules={[
            {
              required: true,
              validator: validateEmail,
            },
          ]}
        >
           <Input type="text" placeholder="Please enter new email" />
        </Form.Item>
        <div className={styles.btnGroup}>
          <Form.Item noStyle>
            <Button className={styles.cancelBtn} onClick={handleClose}>
            Cancel
            </Button>
            <Button type='primary' htmlType="submit" onClick={onSubmit}>
            OK
            </Button>
          </Form.Item>
        </div>
      </Form>
    </Modal>
  );
}
